<template>
  <div class="tuanlist">
    <div class="btn">
        <span @click="active(0)" :class="{active : Num == 0}">正在抢购</span>
        <span @click="active(1)" :class="{active : Num == 1}">上新预告</span>
    </div>
    <div class="tuan1">
        <div class="list" v-for="(item,index) in tuanlist " :key="index">
            <div class="imgbox">
                <img v-lazy="item.picture" alt="">
            </div>
            <div class="text">
                <p>{{item.name}}</p>
                <h2>{{item.name}}</h2>
                <div class="pirce">
                    <div class="left">
                        <span>爆爆团价</span>
                        <div class="discount">
                            <span>￥{{item.min_price}}</span>
                            <!-- <span>{{item.promotion_info}}</span> -->
                        </div>
                        <del>￥{{item.min_price}}</del>
                    </div>
                    <div class="right">
                        <div class="btns">马上抢</div>
                        <p>{{item.month_saled_content}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { tuan } from '@/utils/api'
export default {
    data(){
        return {
            Num:0,
            tuanlist:[]
        }
    },
    mounted(){
        tuan({status:0}).then(res=>{
            console.log(res.data);
            this.tuanlist = res.data.list
        })
    },
    methods:{
        active(num){
            tuan({status:num}).then(res=>{
                console.log(res.data);
                this.tuanlist = res.data.list
            })
            this.Num = num
        }
    }

}
</script>

<style scoped lang="scss">
.tuanlist{

    margin: 0 .2667rem;
    position: relative;
    top:-2.1333rem;
    .btn{
            margin: .4rem;
        span{
            font-size: .48rem;
            margin-right: .5333rem;
            padding-bottom: .08rem;
            color: white;
        }
    }
    .tuan1{
        background: #f5f5f5;
        border-radius: .2667rem;
        .list{
            width: 100%;
            box-sizing: border-box;
            padding: .2667rem;
            margin-bottom: .4rem;
            border-radius: .2667rem;
            background: white;
            display: flex;
            .imgbox{
                width: 2.6667rem;
                height: 2.6667rem;
                margin-right: .2667rem;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: .1333rem;
                }
            }
            .text{
                flex: 1;
                p{
                    font-size: .3733rem;
                    color: #999;
                    padding-bottom: .1333rem ;
                }
                h2{
                    font-size: .48rem;
                }
                .pirce{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .left{
                        display: flex;
                        flex-direction: column;
                        span:first-child{
                            color: orange;
                            font-size: .32rem;
                            padding: .1333rem 0;
                        }
                        .discount{
                            display: flex;
                            align-items: center;
                            span:first-child{
                                color: red;
                                font-size: .5333rem;
                                font-weight: 600;
                                margin-right: .1333rem;

                            }
                            span:last-child{
                                font-size: .3733rem;
                                border: .0267rem solid orangered;
                                padding:.08rem ;
                                color: orangered;
                                border-radius: .08rem;
                            }
                        }
                        del{
                            font-size: .3733rem;
                            color: #ccc;
                        }
                    }
                    .right{
                        div{
                            margin:.2667rem 0;
                            line-height: .8rem;
                            padding: .1333rem .4rem;
                            background-color: red;
                            color: white;
                            border-radius:.5333rem;
                            font-size: .4267rem;
                        }
                        p{
                            text-align: center;
                            color: red;
                        }
                    }
                }
            }
            
        }
    }
}
.active{
    border-bottom: .1333rem solid white;
    font-weight: 700;
}
</style>